<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas width="800" height="800" id="canvas"></canvas>
    <span>click</span>
    <script>
        var can = document.getElementById('canvas');

        var ocan = can.getContext('2d');

        ocan.translate(250, 250);

        // drawArrow();

        var arrColor = ["#aff", "#F97E8F", "#73AEFF", "#FABE2D", "#00E2E3", "#C68EF5", "#CC0066", "#66FF00", "#FFFF00"];

        var arrTxt = ["0", "1", "2", "javascript", "html5", "css3", "jQuery", "php", "node.js", "ps", "java"];

        var rate = Math.PI / 180;

        var angle = 0;

        var num = 0;


        const r = 360 / (arrTxt.length - 2);
        for (var i = 0; i < arrColor.length; i++) {
            angle += r;


            ocan.save();

            ocan.beginPath();

            ocan.moveTo(0, 0);

            ocan.arc(0, 0, 150, (angle - r) * rate, angle * rate);

            ocan.closePath();

            ocan.fillStyle = arrColor[i];

            ocan.strokeStyle = "#000";

            ocan.stroke();

            ocan.fill();

            ocan.beginPath();

            ocan.rotate((angle - 20) * rate);
            console.log(angle, rate, (angle - 20) * rate)
            ocan.fillStyle = "#000";

            ocan.font = "14px 微软雅黑";

            ocan.fillText(arrTxt[i], 80, 0);

            /*画中间小圆*/

            ocan.beginPath();

            ocan.moveTo(0, 0);

            ocan.arc(0, 0, 50, 0, 360 * Math.PI / 180);

            ocan.closePath();

            ocan.fillStyle = "#ffffcc";

            ocan.stroke();

            ocan.fill();

            ocan.restore();

        }

        /*绘制箭头*/

        function drawArrow() {
            ocan.save();

            ocan.beginPath();

            ocan.moveTo(155, 0);

            ocan.lineTo(180, -20);

            ocan.lineTo(180, -7);

            ocan.lineTo(320, -7);

            ocan.lineTo(320, 7);

            ocan.lineTo(180, 7);

            ocan.lineTo(180, 20);

            ocan.closePath();

            var color = ocan.createLinearGradient(130, 0, 300, 0);

            color.addColorStop(0, "#CC0000");

            color.addColorStop(0.4, "#FF0099");

            color.addColorStop(0.9, "#FFCC66");

            ocan.fillStyle = color;

            ocan.strokeStyle = "#202020";

            //阴影

            ocan.shadowOffsetX = 2;

            ocan.shadowOffsetY = 2;

            ocan.shadowBlur = 4;

            ocan.shadowColor = "#FF6633";

            ocan.stroke();

            ocan.fill();

            ocan.restore();
        }
    </script>
</body>

</html>